<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../elements/som-input-styles.html">

<dom-module id="som-edit-expectation-form">
  <template>
    <style include="som-input-styles">
      .expectation-checkbox, .modifier-checkbox {
        display: flex;
        padding: 0.5em;
        margin: 0.25em;
        font-size: 9pt;
      }
      .expectation-checkbox input[type="checkbox"], .modifier-checkbox input[type="checkbox"] {
        margin-right: 0.5em;
        padding: 0;
      }
       .expectations, .modifiers, .bugs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 0.5em;
      }
      .edit-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        align-items: baseline;
        padding-left: 0.5em;
      }
      label {
        padding-left: 0.5em;
        cursor: pointer;
      }
      label + input[type="checkbox"]:checked  {
        font-weight: bold;
      }
      .bug-value {
        display: flex;
        flex-wrap: none;
      }
      .add-bug {
        display: flex;
      }
      .bugs {
        flex-direction: column;
      }
      .field-name {
        font-weight: bold;
      }
      .test-name {
        font-size: 12pt;
        font-weight: bold;
        font-family: monospace;
        border-bottom: 1px solid #ddd;
        margin-bottom: 1em;
      }
      #main {
        display: flex;
        flex-direction: column;
      }
      #newBugError {
        margin: 1em;
        color: red;
        font-style: italic;
      }
    </style>
    <div class="test-name">[[_editValue.TestName]]</div>
    <div class="field-name">Expected Results (any of the following):</div>
    <div class="expectations">
      <template is="dom-repeat" items="[[expectationValues]]" as="val">
        <div class="expectation-checkbox">
          <label class="checkbox">
            <input type="checkbox" id$="expect-[[val]]" value="[[val]]" on-tap="_toggleExpectation" checked="[[_expects(_editValue, val)]]">
            [[val]]
          </label>
        </div>
      </template>
    </div>
    <div class="field-name">Modifiers:</div>
    <div class="modifiers">
      <template is="dom-repeat" items="[[modifierValues]]" as="val">
        <div class="modifier-checkbox">
          <label class="checkbox">
            <input type="checkbox" id="modifier-[[val]]" value="[[val]]" on-tap="_toggleModifier" checked="[[_hasModifier(_editValue, val)]]">
            [[val]]
         </label>
        </div>
      </template>
    </div>
    <div class="field-name">Bugs:</div>
    <div class="bugs">
       <template is="dom-repeat" items="[[_editValue.Bugs]]" as="bug">
        <div class="bug-value">
          <a href$="http://[[bug]]" target="_blank">[[bug]]</a>
          <button on-tap="_removeBug" value="[[bug]]">Remove</button>
        </div>
      </template>
    </div>
    <div class="add-bug">
      <input id="newBug" type="text" class="new-bug" placeholder="Bug ID or URL"></input>
      <div id="newBugError">[[_newBugError]]</div>
      <button on-tap="_addBug" class="add-bug">Add</button>
    </div>
    <div class="edit-controls">
      <button value="Create change CL" id="submitButton" on-tap="_createChangeCL">Create change CL</button>
      <button value="Cancel" id="cancelButton" on-tap="_cancelChangeCL">Cancel</button>
    </div>
  </template>
  <script src="som-edit-expectation-form.js"></script>
</dom-module>
